<!DOCTYPE html>

<html>

	<head>
		<!-- 页面meta -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>用户管理</title>
		<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

		<!-- 引入样式 -->
		<link rel="stylesheet" href="../plugins/elementui/index.css">
		<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="../css/style.css">
		<!-- 引入组件库 -->
		<script src="../js/vue.js"></script>
		<script src="../plugins/elementui/index.js"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script src="../js/axios-0.18.0.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
				border: 0;
			}

			.el-header {
				background-color: #B3C0D1;
				color: #333;
				line-height: 60px;
			}

			.el-aside {
				color: #333;
			}

			.el-menu {
				border: none;
				border-right-width: 0;
			}

			.el-button {
				border: none;
			}

			.buttonColor {
				background-color: rgb(32, 155, 159);
			}

			.buttonColor:hover {
				background-color: rgba(32, 155, 159, 0.773)
			}

			.buttonColor:focus {
				background-color: rgba(32, 155, 159, 0.773)
			}

			.buttonColor2:hover {
				color: rgba(32, 155, 159, 0.773)
			}

			.el-pager li:hover {
				color: rgba(32, 155, 159, 0.773)
			}

			.el-pager li.active {
				color: rgba(32, 155, 159, 0.773)
			}
		</style>
	</head>

	<body style="background-color: #545c64;">
		<div id="app">
			<el-header style="text-align: left; background-color: rgba(1, 12, 21, 0.421);">
				<div style="font-size: 20px; color:rgb(32, 155, 159)">
					<div style="float: left;">
						<span>图书管理平台</span></div>
					<div style="float: right; font-size: 15px;">
						<a @click="logout()" style="color:rgb(32, 155, 159); cursor:pointer;">安全退出</a></div>
					<div style="width: 100px; float: right; font-size: 15px;">
						<a href="admin.html" style="color: rgb(32, 155, 159);">{{ adminName }}</a>
					</div>
				</div>
			</el-header>
			<el-container style="height: auto;">
				<el-aside width="200px" style="background-color: rgba(1, 12, 21, 0);">
					<el-menu default-active="3" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="rgb(32, 155, 159)" style="background-color: rgba(1, 12, 21, 0.7); color: white;">
						<el-menu-item index="1" class="el-menu-item" @click="load1()" style="border-right: none;"><i class="el-icon-s-data"></i>数据统计</el-menu-item>
						<el-menu-item index="2" class="el-menu-item" @click="load2()" style="border-right: none;"><i class="el-icon-user-solid"></i>管理员管理</el-menu-item>
						<el-menu-item index="3" class="el-menu-item" @click="load3()" style="border-right: none;"><i class="el-icon-user"></i>用户管理</el-menu-item>
						<el-menu-item index="4" class="el-menu-item" @click="load4()" style="border-right: none;"><i class="el-icon-collection"></i>图书管理</el-menu-item>
						<el-menu-item index="5" class="el-menu-item" @click="load5()" style="border-right: none;"><i class="el-icon-tickets"></i>借阅管理</el-menu-item>
						<el-menu-item index="6" class="el-menu-item" @click="load6()" style="border-right: none;"><i class="el-icon-tickets"></i>公告管理</el-menu-item>
					</el-menu>
				</el-aside>

				<!-- <el-container> -->
				<el-main>
					<div class="content-header">
						<h1>用户管理</h1>
					</div>
					<div class="app-container">
						<div class="box">
							<div class="filter-container">
								<el-input placeholder="用户账号" v-model="username" style="width: 200px;" class="filter-item"></el-input>
								<el-button type="primary" @click="getUser()" class="buttonColor butT">查询用户</el-button>
								<el-button type="primary" @click="getAll()" class="buttonColor butT">查询所有</el-button>
								<el-button type="primary" class="buttonColor butT" @click="handleCreate()">新建用户</el-button>
							</div>
							<el-table size="small" border current-row-key="id" :data="currentPageData" stripe highlight-current-row>
								<el-table-column type="index" align="center" label="序号"></el-table-column>
								<el-table-column prop="id" label="用户编号" align="center"></el-table-column>
								<el-table-column prop="username" label="用户账号" align="center"></el-table-column>
								<el-table-column prop="password" label="用户密码" align="center"></el-table-column>
								<el-table-column prop="name" label="用户姓名" align="center"></el-table-column>
								<el-table-column prop="age" label="用户年龄" align="center"></el-table-column>
								<el-table-column prop="sex" label="用户性别" align="center"></el-table-column>
								<el-table-column prop="tel" label="用户手机号" align="center"></el-table-column>
								<el-table-column prop="limitNumber" label="借书上限" align="center"></el-table-column>
								<el-table-column prop="lentNumber" label="已借数量" align="center"></el-table-column>
								<el-table-column prop="money" label="余额（元）" align="center"></el-table-column>
								<el-table-column label="操作" width="180px" align="center">
									<template slot-scope="scope">
										<el-button type="primary" size="mini" class="buttonColor" @click="handleUpdate(scope.row)">编辑</el-button>
										<el-button type="danger" size="mini" class="border:none" @click="handleDelete(scope.row)">删除</el-button>
									</template>
								</el-table-column>
							</el-table>
							<!-- 分页工具条 -->
							<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
							</el-pagination>
							<!-- 新增标签弹层 -->
							<div class="add-form">
								<el-dialog title="新增用户" :visible.sync="dialogFormVisible">
									<el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
										<el-row>
											<el-col :span="12">
												<el-form-item label="用户账号" prop="username">
													<el-input v-model="formData.username" />
												</el-form-item>
											</el-col>
											<el-col :span="12">
												<el-form-item label="用户密码" prop="password">
													<el-input v-model="formData.password" />
												</el-form-item>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="12">
												<el-form-item label="用户姓名" prop="name">
													<el-input v-model="formData.name" />
												</el-form-item>
											</el-col>
											<el-col :span="12">
												<el-form-item label="用户年龄" prop="age">
													<el-input v-model="formData.age" />
												</el-form-item>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="12">
												<el-form-item label="用户性别" prop="sex">
													<el-input v-model="formData.sex" />
												</el-form-item>
											</el-col>
											<el-col :span="12">
												<el-form-item label="用户手机号" prop="tel">
													<el-input v-model="formData.tel" />
												</el-form-item>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="12">
												<el-form-item label="借书上限" prop="limitNumber">
													<el-input v-model="formData.limitNumber" />
												</el-form-item>
											</el-col>
											<el-col :span="12">
												<el-form-item label="已借数量" prop="lentNumber">
													<el-input v-model="formData.lentNumber" />
												</el-form-item>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="12">
												<el-form-item label="余额（元）" prop="money">
													<el-input v-model="formData.money" />
												</el-form-item>
											</el-col>
										</el-row>
									</el-form>
									<div slot="footer" class="dialog-footer">
										<el-button class="buttonColor2" @click="dialogFormVisible = false">取消</el-button>
										<el-button type="primary" class="buttonColor" @click="handleAdd()">确定</el-button>
									</div>
								</el-dialog>
							</div>
							<!-- 编辑标签弹层 -->
							<div class="add-form">
								<el-dialog title="编辑用户信息" :visible.sync="dialogFormVisible4Edit">
									<el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
										<el-row>
											<el-col :span="12">
												<el-form-item label="用户账号" prop="username">
													<el-input v-model="formData.username" />
												</el-form-item>
											</el-col>
											<el-col :span="12">
												<el-form-item label="用户密码" prop="password">
													<el-input v-model="formData.password" />
												</el-form-item>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="12">
												<el-form-item label="用户姓名" prop="name">
													<el-input v-model="formData.name" />
												</el-form-item>
											</el-col>
											<el-col :span="12">
												<el-form-item label="用户年龄" prop="age">
													<el-input v-model="formData.age" />
												</el-form-item>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="12">
												<el-form-item label="用户性别" prop="sex">
													<el-input v-model="formData.sex" />
												</el-form-item>
											</el-col>
											<el-col :span="12">
												<el-form-item label="用户手机号" prop="tel">
													<el-input v-model="formData.tel" />
												</el-form-item>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="12">
												<el-form-item label="借书上限" prop="limitNumber">
													<el-input v-model="formData.limitNumber" />
												</el-form-item>
											</el-col>
											<el-col :span="12">
												<el-form-item label="已借数量" prop="lentNumber">
													<el-input v-model="formData.lentNumber" />
												</el-form-item>
											</el-col>
										</el-row>
										<el-row>
											<el-row>
												<el-col :span="12">
													<el-form-item label="余额（元）" prop="money">
														<el-input v-model="formData.money" />
													</el-form-item>
												</el-col>
											</el-row>
										</el-row>
									</el-form>
									<div slot="footer" class="dialog-footer">
										<el-button class="buttonColor2" @click="dialogFormVisible4Edit = false">取消</el-button>
										<el-button type="primary" class="buttonColor" @click="handleEdit()">确定</el-button>
									</div>
								</el-dialog>
							</div>
						</div>
					</div>
				</el-main>
				<!-- </el-container> -->
			</el-container>
		</div>

	</body>

	<script>
		var vue = new Vue({
			el: '#app',
			data: {
				pagination: {},
				adminName: '',
				username: '', //输入账号名
				dataList: [], //当前页要展示的列表数据
				formData: {}, //表单数据
				dialogFormVisible: false, //控制表单是否可见
				dialogFormVisible4Edit: false, //编辑表单是否可见
				rules: { //校验规则
					username: [{
						required: true,
						message: '用户账号为必填项',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '用户密码为必填项',
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: '用户姓名为必填项',
						trigger: 'blur'
					}],
					tel: [{
						required: true,
						message: '用户手机号为必填项',
						trigger: 'blur'
					}],
					limitNumber: [{
						required: true,
						message: '借书上限为必填项',
						trigger: 'blur'
					}],
					lentNumber: [{
						required: true,
						message: '已借数量为必填项',
						trigger: 'blur'
					}],
				},
				totalPage: 1, // 统共页数，默认为1
				currentPage: 1, //当前页数 ，默认为1
				pageSize: 10, // 每页显示数量
				pageSizes: [10, 20, 40], // 页码划分
				currentPageData: [], //当前页显示内容
				headPage: 1,
				total: 40,
			},

			//钩子函数，VUE对象初始化完成后自动执行
			created() {
				this.adminName = localStorage.getItem("adminName");
				if (localStorage.getItem("adminName") == null){
					alert('请先登录!!!');
					window.location.href = "../index.html";
				}
				this.getAll();
			},

			// 钩子函数，向后端发请求拿到数据后做业务处理
			mounted() {

			},

			methods: {
				// 退出登录
				logout() {
					localStorage.removeItem("adminName");
					localStorage.removeItem("password");
					window.location.href = "../index.html";
				},

				// 网页跳转
				load1() {
					window.location.href = "statistics.html";
				},
				load2() {
					window.location.href = "admin.html";
				},
				load3() {
					window.location.href = "users.html";
				},
				load4() {
					window.location.href = "books.html";
				},
				load5() {
					window.location.href = "lentRecord.html";
				},
				load6() {
					window.location.href = "notice.html";
				},
				// 分页工具
				handleSizeChange(val) {
					console.log(`每页 ${val} 条`);
					this.pageSize = val;
					this.getCurrentPageData();
				},
				handleCurrentChange(val) {
					console.log(`当前页第 ${val} 页`);
					console.log(`总共 ${this.totalPage} 页`);
					console.log(`总共 ${this.total} 条数据`)
					this.currentPage = val;
					this.getCurrentPageData();
				},
				getCurrentPageData() {
					let begin = (this.currentPage - 1) * this.pageSize;
					let end = this.currentPage * this.pageSize;
					this.currentPageData = this.dataList.slice(
							begin,
							end
					);
				},

				//查询单个用户
				getUser() {
					axios.get("/users/" + this.username).then((res) => {
						console.log(res.data.data);
						if (res.data.code == 20041) {
							this.dataList = [];
							this.dataList.push(res.data.data);
						} else {
							this.$message.error(res.data.msg);
						}
						console.log(res.data);
						console.log(this.dataList);
						this.getCurrentPageData();
					})
				},

				//列表
				getAll() {
					//发送ajax请求
					axios.get("/users").then((res) => {
						this.dataList = res.data.data;
						this.totalPage = Math.ceil(this.dataList.length / this.pageSize);
						this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
						this.total = this.dataList.length;
						this.getCurrentPageData();
					});
				},

				//弹出添加窗口
				handleCreate() {
					this.dialogFormVisible = true;
					this.resetForm();
				},

				//重置表单
				resetForm() {
					this.formData = {};
				},

				//添加
				handleAdd() {
					//发送ajax请求
					axios.post("/users", this.formData).then((res) => {
						console.log(res.data);
						//如果操作成功，关闭弹层，显示数据
						if (res.data.code == 20011) {
							this.dialogFormVisible = false;
							this.$message.success("添加成功");
						} else if (res.data.code == 20010) {
							this.$message.error("添加失败");
						} else {
							this.$message.error(res.data.msg);
						}
					}).finally(() => {
						this.getAll();
					});
				},

				//弹出编辑窗口
				handleUpdate(row) {
					// console.log(row);   //row.id 查询条件
					//查询数据，根据username查询
					axios.get("/users/" + row.username).then((res) => {
						// console.log(res.data.data);
						if (res.data.code == 20041) {
							//展示弹层，加载数据
							this.formData = res.data.data;
							this.dialogFormVisible4Edit = true;
						} else {
							this.$message.error(res.data.msg);
						}
					});
				},

				//编辑
				handleEdit() {
					//发送ajax请求
					axios.put("/users", this.formData).then((res) => {
						//如果操作成功，关闭弹层，显示数据
						if (res.data.code == 20031) {
							this.dialogFormVisible4Edit = false;
							this.$message.success("修改成功");
						} else if (res.data.code == 20030) {
							this.$message.error("修改失败");
						} else {
							this.$message.error(res.data.msg);
						}
					}).finally(() => {
						this.getAll();
					});
				},

				// 删除
				handleDelete(row) {
					//1.弹出提示框
					this.$confirm("此操作永久删除当前数据，是否继续？", "提示", {
						type: 'info'
					}).then(() => {
						//2.做删除业务
						axios.delete("/users/" + row.username).then((res) => {
							if (res.data.code == 20021) {
								this.$message.success("删除成功");
							} else {
								this.$message.error("删除失败");
							}
						}).finally(() => {
							this.getAll();
						});
					}).catch(() => {
						//3.取消删除
						this.$message.info("取消删除操作");
					});
				}
			}
		})
	</script>

</html>